<template>
  <!-- 监控中心 -->
  <div class="monitor">
    <div class="content">
      <div class="search">
        <el-input :placeholder="searchCondition" v-model="filterText"></el-input>
        <span class="searchButton" @click="searchData">搜索</span>
        <i class="el-icon-refresh-right" @click="changeSearchCondition"></i>
      </div>
      <!-- <div class="el-tree__empty-block"><span class="el-tree__empty-text">暂无数据</span></div> -->
      <div class="block">
        <el-tree
          class="filter-tree"
          :data="data"
          show-checkbox
          node-key="id"
          default-expand-all
          :props="defaultProps"
          :filter-node-method="filterNode"
          :expand-on-click-node="false"
          @check="treeChange"
          ref="tree"
        >
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <span>{{ node.label }}</span>
            <span>
              <el-button type="text" size="mini" v-if="data.type == 'person'" @click.stop="() => getLocationData(data)">
                <i class="el-icon-location"></i>
              </el-button>
              <el-button type="text" size="mini" v-if="data.type == 'person'" @click.stop="() => getTrack(data)">
                <i class="el-icon-video-camera-solid"></i>
              </el-button>
            </span>
          </span>
        </el-tree>
      </div>
    </div>
    <div class="button">
      <el-button type="primary" round @click="bulkAction" v-if="chooseArr.length > 0">批量定位</el-button>
      <el-button type="info" round v-else>批量定位</el-button>
      <el-button round @click="handleCheckAllChange">全选/重置</el-button>
    </div>
    <div class="chooseTimer" v-show="isShowTimeChoose">
      <el-calendar v-model="timeValue"></el-calendar>
      <el-slider v-model="timeRange" range :max="23" :format-tooltip="formatTooltip" style="padding: 0 20px;"></el-slider>
      <div class="timerNum">
        <span>0点</span>
        <span>23点</span>
      </div>
      <div class="queryTimer">{{ queryTrackTime }}</div>
      <!-- 速率 -->
      <div class="velocity">
        <p class="tit">速率：</p>
        <div>
          <el-radio-group v-model="velocityRadio" size="mini">
            <el-radio-button label="0.5"></el-radio-button>
            <el-radio-button label="1"></el-radio-button>
            <el-radio-button label="2"></el-radio-button>
            <el-radio-button label="4"></el-radio-button>
            <el-radio-button label="8"></el-radio-button>
          </el-radio-group>
        </div>
      </div>
      <div class="timeChooseButton">
        <el-button type="primary" round @click="trackQuery">
          <i class="el-icon-video-play"></i>&nbsp;&nbsp;播放路径
        </el-button>
        <el-button round @click="isShowTimeChoose = false">
          <i class="el-icon-circle-close"></i>&nbsp;&nbsp;关闭窗口
        </el-button>
      </div>
    </div>
  </div>
</template>


<script>
import { dateFormat } from '@/base/utils';

export default {
  components: {},
  data () {
    return {
      data: [],
      filterText: '', //搜索框搜索内容
      defaultProps: {
        children: 'infoList',
        label: 'name'
      },
      chooseArr: [], //选中的号码
      checkAll: false,
      markerPoint: [],
      timeValue: new Date(),
      timeRange: [4, 8],
      queryDate: dateFormat(new Date(), ("yyyy/MM/dd")),//轨迹查询日期
      timeRangeStart: '04:00',//轨迹查询开始时间
      timeRangeEnd: '08:00',//轨迹查询结束时间
      queryTrackTime: '',//轨迹查询时间日期
      isShowTimeChoose: false,
      personTrack: '',
      searchCondition: '请输入名称',
      serachName: '', //搜索名称
      searchTel: '', //搜索SIM卡号
      locationPointer: [],
      velocityRadio:"1"
    }
  },
  methods: {
    // 
    filterNode (value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    //查询点位数据
    getLocationData (data) {
      let personMsisdn = [];
      personMsisdn.push(data.msisdn);
      let url = '/lbs/locatepeople/locateNow/locatePerson';
      let params = {
        msids: JSON.stringify(personMsisdn)
      }
      this.$http.post(url, params).then(res => {
        let { retCode, retMsg, data } = res.data;
        if (retCode == '0') {//成功的情况
          console.log(data);
          this.locationPointer = data.map(items => {
            return { pointer: [items.recordLng, items.recordLat], time: items.recordDate, inverseGeocoding: items.inverseGeocoding, msisdn: items.msId }
          })
          this.$emit("getPersonPoint", this.locationPointer);
        } else {
          this.$alert(retMsg || '请求失败');
        }
      }).catch(err => {
        this.$alert(err)
      })
    },
    //人员轨迹查询
    getTrack (data) {
      this.personId = data.id;
      this.isShowTimeChoose = true;
    },
    //批量操作
    bulkAction () {
      let res = this.$refs.tree.getCheckedNodes();
      this.chooseArr = [];
      res.forEach(items => {
        if (items.type == 'person') {
          this.chooseArr.push(items.msisdn);
        }
      })
      let url = '/lbs/locatepeople/locateNow/locatePerson';
      let params = {
        msids: JSON.stringify(this.chooseArr)
      }
      this.$http.post(url, params).then(res => {
        let { retCode, retMsg, data } = res.data;
        if (retCode == '0') {//成功的情况
          console.log(data);
          this.locationPointer = data.map(items => {
            return { pointer: [items.recordLng, items.recordLat], time: items.recordDate, inverseGeocoding: items.inverseGeocoding, msisdn: items.msId }
          })
          this.locationPointer = [...new Set(this.locationPointer)];
          this.$emit("getPersonPoint", this.locationPointer);
        } else {
          this.$alert(retMsg || '请求失败');
        }
      }).catch(err => {
        this.$alert(err)
      })
      //this.$emit("getPersonPoint", this.locationPointer);
    },
    //全选
    handleCheckAllChange () {
      if (!this.checkAll) {
        this.$refs.tree.setCheckedNodes(this.data);
      } else {
        this.$refs.tree.setCheckedKeys([]);
      }
      this.checkAll = !this.checkAll;
    },
    //点击播放轨迹
    trackQuery () {
      this.isShowTimeChoose = false;
      let url = '/lbs/datacenter/monitorMag/h5QryTrackPlayback';
      let params = {
        personId: this.personId,
        startTime: this.startTime,
        endTime: this.endTime
      }
      this.$http.post(url, params).then(res => {
        let { retCode, retMsg, data } = res.data;
        if (retCode == '0') {//成功的情况
          this.personTrack = data.map(items => {
            return [items.recordLng, items.recordLat]
          })
          this.isShowTimeChoose = false;
          this.$emit("getPersonTrack", this.personTrack,this.velocityRadio);
        } else {
          this.$alert(retMsg || '请求失败');
        }
      }).catch(err => {
        this.$alert(err)
      })
    },
    //切换搜索条件
    changeSearchCondition () {
      this.filterText = '';
      if (this.searchCondition == '请输入名称') {
        this.searchCondition = '请输入SIM卡号';
      } else if (this.searchCondition == '请输入SIM卡号') {
        this.searchCondition = '请输入名称';
      }
    },
    //点击搜索
    searchData () {
      if (this.searchCondition == '请输入名称') {
        this.searchName = this.filterText;
        this.searchTel = '';
        this.getTreeData();
      } else if (this.searchCondition == '请输入SIM卡号') {
        this.searchTel = this.filterText;
        this.searchName = '';
        this.getTreeData();
      }
    },
    //获取监控中心树状图数据
    getTreeData () {
      let url = '/lbs/datacenter/monitorMag/h5QryInfo';
      let params = {
        "searchName": this.searchName,
        "searchMsisdn": this.searchTel
      }
      this.$http.post(url, params).then(res => {
        let { retCode, retMsg, data } = res.data;
        if (retCode == '0') {//成功的情况
          this.data = data;
          console.log(this.data);
        } else {
          this.$alert(retMsg || '请求失败');
        }
      }).catch(err => {
        this.$alert(err)
      })
    },
    //树形图节点被点击时触发
    treeChange () {
      let res = this.$refs.tree.getCheckedNodes();
      this.chooseArr = [];
      res.forEach(items => {
        if (items.type == 'person') {
          this.chooseArr.push(items.msisdn);
        }
      })
    }
  },
  created () {
    this.queryTrackTime = this.queryDate + ' ' + this.timeRangeStart + '~' + this.timeRangeEnd;
    this.startTime = this.queryDate + ' ' + this.timeRangeStart;
    this.endTime = this.queryDate + ' ' + this.timeRangeEnd;
  },
  mounted () {
    this.getTreeData();
  },
  watch: {
    //监听点位查询时间的变化
    timeRange: {
      deep: true,
      handler (newVal, oldVal) {
        if (newVal[0] < 10) {
          this.timeRangeStart = '0' + newVal[0] + ':00';
        } else {
          this.timeRangeStart = newVal[0] + ':00';
        }
        if (newVal[1] < 10) {
          this.timeRangeEnd = '0' + newVal[1] + ':00';
        } else {
          this.timeRangeEnd = newVal[1] + ':00';
        }
        this.queryTrackTime = this.queryDate + ' ' + this.timeRangeStart + '~' + this.timeRangeEnd;
        this.startTime = this.queryDate + ' ' + this.timeRangeStart;
        this.endTime = this.queryDate + ' ' + this.timeRangeEnd;
      }
    },
    //监听点位查询日期的变化
    timeValue (newVal) {
      this.queryDate = dateFormat(newVal, ("yyyy-MM-dd"));
      this.queryTrackTime = this.queryDate + ' ' + this.timeRangeStart + '~' + this.timeRangeEnd;
      this.startTime = this.queryDate + ' ' + this.timeRangeStart;
      this.endTime = this.queryDate + ' ' + this.timeRangeEnd;
    },
    // chooseArr(val) {
    //     if(val.length == this.$refs.tree.getCheckedNodes()) {
    //         this.checkAll == true;
    //     }else {
    //         this.checkAll == false;
    //     }
    // }
  },
}
</script>

<style scoped lang="less">
.monitor {
  width: 335px;
  display: flex;
  flex-direction: column;
  .content {
    flex: 1;
    overflow-y: scroll;
  }
}
.search {
  margin: 30px 20px 8px 20px;
  position: relative;
  .searchButton {
    position: absolute;
    font-size: 12px;
    color: #1681fb;
    right: 16px;
    top: 6px;
    cursor: pointer;
  }
  .el-icon-refresh-right {
    position: absolute;
    top: 6px;
    right: 48px;
  }
}
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
  .iconzhibohuifang {
    color: #fb6464;
  }
}
.block {
  margin: 0 20px 20px 20px;
}
.button {
  width: 100%;
  height: 60px;
  border-top: 1px solid #ececec;
  display: flex;
  justify-content: center;
  align-items: center;
}
.timeChooseButton {
  width: 72%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}
.el-tree__empty-block {
  height: auto;
}
</style>
<style lang='less'>
.el-tree-node__content {
  height: 35px;
  border-bottom: 1px solid #ececec;
}
.search .el-input__inner {
  height: 30px;
  border-radius: 15px;
  line-height: 30px;
}
.monitor {
  .button .el-button {
    height: 40px;
  }
  .button > .el-button:first-child {
    margin-right: 20px;
  }
  .el-button .is-round {
    padding: 0;
  }
}
.chooseTimer {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 270px;
  background-color: #fff;
  box-shadow: 0px 11px 4px 0px rgba(0, 0, 0, 0.11);
  border-radius: 16px;
  .timerNum {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    margin-top: -10px;
    padding: 0 15px;
    color: #585858;
  }
  .velocity {
    display: flex;
    color: #585858;
    font-size: 13px;
    margin-top: 15px;
    margin-left: 15px;
    .tit {
      line-height: 28px;
    }
  }
  .queryTimer {
    width: 180px;
    height: 22px;
    background: #d8d8d8;
    border-radius: 9px;
    opacity: 0.3;
    font-size: 13px;
    margin: 0 auto;
    text-align: center;
    line-height: 22px;
    margin-top: 9px;
  }
  .el-calendar-table .el-calendar-day {
    width: auto;
    height: auto;
  }
  .el-button--mini,
  .el-button--mini.is-round {
    padding: 5px 3px;
  }
  .el-calendar__title {
    font-size: 13px;
  }
  thead {
    font-size: 13px;
  }
  .el-calendar__body {
    padding: 0px 20px 8px;
  }
  .el-calendar__body {
    font-size: 13px;
  }
  .el-slider__runway {
    height: 4px;
  }
  .el-slider__button {
    width: 5px;
    height: 10px;
    border-radius: 0;
    border-color: #525252;
    background-color: #525252;
  }
  .el-button.is-round {
    font-size: 12px;
    padding: 6px 9px;
    margin: 15px 0;
  }
  .el-calendar {
    border-radius: 16px 16px 0 0;
  }
}
.el-slider__bar {
  background-color: #808080;
}
.monitor {
  .el-icon-location {
    font-size: 18px;
  }
  .el-icon-video-camera-solid {
    font-size: 18px;
    color: #fb6464;
  }
}
</style>